<template>
    <n-grid x-gap="12" :cols="4" class="mb-6">
        <n-gi v-for="(item, index) in data" :key="index">
            <n-card class="cursor-pointer" @click="$commonOpen(item)">
                <template #cover>
                    <img :src="item.src"  alt=""/>
                </template>
                <div class="text-center p-4">
                    {{ item.name }}
                </div>
            </n-card>
        </n-gi>
    </n-grid>
</template>

<script setup>
// 引入naive-ui组件
import { NGrid, NGi, NCard } from 'naive-ui'

// 声明类型
const props = defineProps({
    data: {
        type: Array,
        required: true
    }
})
</script>
